<template>
    <div class="user-no-repayment">
        <div class="header">
            <div class="header__item" @click='setTabIndex(0)' :class="{'active':tabIndex == 0}">
                <p>{{info.totalWaitRepayAmount | toYuan}}</p>
                <span>总借入</span>
            </div>
            <div class="header__item" @click='setTabIndex(1)' :class="{'active':tabIndex == 1}">
                <p>{{info.recent7DayWaitRepayAmount | toYuan}}</p>
                <span>7日待还</span>
            </div>
            <div class="header__item" @click='setTabIndex(2)' :class="{'active':tabIndex == 2}">
                <p>{{info.recent30DayWaitRepayAmount | toYuan}}</p>
                <span>30日待还</span>
            </div>
            <div class="header__item" @click='setTabIndex(3)' :class="{'active':tabIndex == 3}">
                <p>{{info.overdueWaitRepayAmount | toYuan}}</p>
                <span>已逾期</span>
            </div>
        </div>
        <div class="wrapper">
            <div class="user-no-repayment-box">
                
                <div class="main">

                    <loading-more
                        v-model='loading1'
                        wrapper='.wrapper'
                        wrapperBox='.user-no-repayment-box'
                        url='repayPlan/waitRepayList'
                        :show='show1'
                        @complete='complete1 = true'
                        @finish='setRecords1'
                        v-show='tabIndex == 0'>
                        <div class="tab__item" v-for='item in records1'>
                            <div class="card nail2">
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount">{{item.borrow.borrowAmount | toYuan}}元</p>
                                        <p class="loan-money__info"><i>{{item.borrow.borrowDays}}天</i><i>{{item.borrow.yearRate/100}}%年化</i></p>
                                    </div>
                                    <div class="loan-user-info">
                                        <span class="loan-user-info__avatar"><img :src="item.user.avatar" alt=""></span>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>{{item.user.realName}}</p>
                                            <p class='loan-user-info__phone'>出借人</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">还款日：{{item.shouldRepayDate | dateFormat}}</li>
                                    <li class="card__info-item">当前期数：{{item.currentPeriod}}/{{item.totalPeriod}}</li>
                                </ul>
                                <p class="card__info-item" 
                                    v-if='withinOneDay(item.shouldRepayDate) !== true'>距离还款日期还有{{withinOneDay(item.shouldRepayDate)}}天</p>
                                <div class="loan-current">
                                    <div class="loan-current__money">
                                        <span class="loan-current__text">本期待还</span>
                                        <p class="loan-current__number">{{item.repayAmount | toYuan}}</p>
                                    </div>
                                    <span class="loan-current__button" @click='goUserLoanInDetail'>立即还款</span>
                                </div>
                            </div>
                        </div>
                        <loading v-show='loading1' :size='15'></loading>
                        <p class='user-list-explain' v-show='complete1'>以上为全部总待还</p>
                        <p class='page-placeholder' v-show='!records1.length'><span>暂无总待还</span></p>
                    </loading-more>

                    <loading-more
                        v-model='loading2'
                        wrapper='.wrapper'
                        wrapperBox='.user-no-repayment-box'
                        url='repayPlan/waitRepayList'
                        :params='{recentDay:7}'
                        @complete='complete2 = true'
                        @finish='setRecords2'
                        :show='show2'
                        v-show='tabIndex == 1'>
                        <div class="tab__item" v-for='item in records2'>
                            <div class="card nail2">
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount">{{item.borrow.borrowAmount | toYuan}}元</p>
                                        <p class="loan-money__info"><i>{{item.borrow.borrowDays}}天</i><i>{{item.borrow.yearRate/100}}%年化</i></p>
                                    </div>
                                    <div class="loan-user-info">
                                        <span class="loan-user-info__avatar"><img :src="item.user.avatar" alt=""></span>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>{{item.user.realName}}</p>
                                            <p class='loan-user-info__phone'>出借人</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">还款日：{{item.shouldRepayDate | dateFormat}}</li>
                                    <li class="card__info-item">当前期数：{{item.currentPeriod}}/{{item.totalPeriod}}</li>
                                </ul>
                                <p class="card__info-item" 
                                    v-if='withinOneDay(item.shouldRepayDate) !== true'>距离还款日期还有{{withinOneDay(item.shouldRepayDate)}}天</p>
                                <div class="loan-current">
                                    <div class="loan-current__money">
                                        <span class="loan-current__text">本期待还</span>
                                        <p class="loan-current__number">{{item.repayAmount | toYuan}}</p>
                                    </div>
                                    <span class="loan-current__button" @click='goUserLoanInDetail'>立即还款</span>
                                </div>
                            </div>
                        </div>
                        <loading v-show='loading2' :size='15'></loading>
                        <p class='user-list-explain' v-show='complete2'>以上为全部7日待还</p>
                        <p class='page-placeholder' v-show='!records2.length'><span>暂无7日待还</span></p>
                    </loading-more>
                    
                    <loading-more
                        v-model='loading3'
                        wrapper='.wrapper'
                        wrapperBox='.user-no-repayment-box'
                        url='repayPlan/waitRepayList'
                        :params='{recentDay:30}'
                        @complete='complete3 = true'
                        @finish='setRecords3'
                        :show='show3'
                        v-show='tabIndex == 2'>
                        <div class="tab__item" v-for='item in records3'>
                            <div class="card nail2">
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount">{{item.borrow.borrowAmount | toYuan}}元</p>
                                        <p class="loan-money__info"><i>{{item.borrow.borrowDays}}天</i><i>{{item.borrow.yearRate/100}}%年化</i></p>
                                    </div>
                                    <div class="loan-user-info">
                                        <span class="loan-user-info__avatar"><img :src="item.user.avatar" alt=""></span>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>{{item.user.realName}}</p>
                                            <p class='loan-user-info__phone'>出借人</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">还款日：{{item.shouldRepayDate | dateFormat}}</li>
                                    <li class="card__info-item">当前期数：{{item.currentPeriod}}/{{item.totalPeriod}}</li>
                                </ul>
                                <p class="card__info-item" 
                                    v-if='withinOneDay(item.shouldRepayDate) !== true'>距离还款日期还有{{withinOneDay(item.shouldRepayDate)}}天</p>
                                <div class="loan-current">
                                    <div class="loan-current__money">
                                        <span class="loan-current__text">本期待还</span>
                                        <p class="loan-current__number">{{item.repayAmount | toYuan}}</p>
                                    </div>
                                    <span class="loan-current__button" @click='goUserLoanInDetail'>立即还款</span>
                                </div>
                            </div>
                        </div>
                        <loading v-show='loading3' :size='15'></loading>
                        <p class='user-list-explain' v-show='complete3'>以上为30日待还</p>
                        <p class='page-placeholder' v-show='!records3.length'><span>暂无30日待还</span></p>
                    </loading-more>
                    
                    <loading-more
                        v-model='loading4'
                        wrapper='.wrapper'
                        wrapperBox='.user-no-repayment-box'
                        url='repayPlan/waitRepayList'
                        :params='{isOverdue:1}'
                        @complete='complete4 = true'
                        @finish='setRecords4'
                        :show='show4'
                        v-show='tabIndex == 3'>
                        <div class="tab__item" v-for='item in records3'>
                            <div class="card nail2">
                                <div class="card__header">
                                    <div class="loan-money">
                                        <p class="loan-money__amount">{{item.borrow.borrowAmount | toYuan}}元</p>
                                        <p class="loan-money__info"><i>{{item.borrow.borrowDays}}天</i><i>{{item.borrow.yearRate/100}}%年化</i></p>
                                    </div>
                                    <div class="loan-user-info">
                                        <span class="loan-user-info__avatar"><img :src="item.user.avatar" alt=""></span>
                                        <div class="loan-user-info__box">
                                            <p class='loan-user-info__name'>{{item.user.realName}}</p>
                                            <p class='loan-user-info__phone'>出借人</p>
                                        </div>
                                    </div>
                                </div>
                                <ul class="card__info">
                                    <li class="card__info-item">还款日：{{item.shouldRepayDate | dateFormat}}</li>
                                    <li class="card__info-item">当前期数：{{item.currentPeriod}}/{{item.totalPeriod}}</li>
                                </ul>
                                <p class="card__info-item" 
                                    v-if='withinOneDay(item.shouldRepayDate) !== true'>距离还款日期还有{{withinOneDay(item.shouldRepayDate)}}天</p>
                                <div class="loan-current">
                                    <div class="loan-current__money">
                                        <span class="loan-current__text">本期待还</span>
                                        <p class="loan-current__number">{{item.repayAmount | toYuan}}</p>
                                    </div>
                                    <span class="loan-current__button" @click='goUserLoanInDetail'>立即还款</span>
                                </div>
                            </div>
                        </div>
                        <loading v-show='loading4' :size='15'></loading>
                        <p class='user-list-explain' v-show='complete4'>以上为全部已逾期</p>
                        <p class='page-placeholder' v-show='!records3.length'><span>暂无已逾期</span></p>
                    </loading-more>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import loadingMore from '../components/LoadingMore.vue'
    import toYuan from '../filters/filter-toYuan'
    import dateFormat from '../filters/filter-dateFormat'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { userApi, lenderApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,
            loadingMore
        },
        filters:{
            toYuan,
            dateFormat
        },
        data() {
            return {
                placeholder:'--',
                tabIndex:0,
                info:{},
                records1:[],
                records2:[],
                records3:[],
                records4:[],
                show1:true,
                show2:false,
                show3:false,
                show4:false,
                complete1:false,
                complete2:false,
                complete3:false,
                complete4:false,
                loading1:true,
                loading2:true,
                loading3:true,
                loading4:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function

            withinOneDay(time){
                let now = moment()
                let diff = moment(time)
                let diffDays = diff.diff(now,'days')
                let diffTime = diff.diff(now)
                if(diffDays <= 0) return true
                return diffDays
                return true
            },
            getInfo(){
                this.showLoading()
                userApi.waitRepayInfo()
                .then(result=>{
                    this.hideLoading()
                    this.info = result
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            setRecords1(records){
                this.records1 = records
            },
            setRecords2(records){
                this.records2 = records
            },
            setRecords3(records){
                this.records3 = records
            },
            setRecords4(records){
                this.records4 = records
            },
            setTabIndex(num){
                this.tabIndex = num
                $('.wrapper').scrollTop(0)

                let showStr = `show${num+1}`
                this.show1 = false
                this.show2 = false
                this.show3 = false
                this.show4 = false
                this[showStr] = true
            },
            goUserLoanInDetail(){
                return
            }
        },
        created(){
            this.getInfo()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    // .user-no-repayment{
    //     position: relative;
    //     .wrapper{
    //         padding-top: 71px;
    //     }
    //     .header{
    //         display: flex;
    //         background-color: #fff;
    //         position: absolute;
    //         top:0;
    //         left:0;
    //         right:0;
    //         z-index:2;
    //     }
    //     .header__item{
    //         width: 20%;
    //         flex:1;
    //         text-align: center;
    //         padding: 14px 0 10px 0;
    //         position: relative;
    //         border-bottom: 1px solid $sectionColor;
    //         p{
    //             @extend %font-subhead;
    //             color:$importColor;
    //             font-size: 16px;
    //         }
    //         span{
    //             @extend %font-caption;
    //             display: block;
    //             font-size: 12px;
    //         }
    //         &:after{
    //             content:'';
    //             position: absolute;
    //             bottom:0;
    //             left:0;
    //             right:0;
    //             border-top:2px solid $orange;
    //             transform:scale(0);
    //             transition:transform ease 150ms;
    //         }
    //         &:active,&.active{
    //             &:after{
    //                 transform:scale(1);
    //             }
    //             p{
    //                 color:$orange;
    //             }
    //             color:$orange;
    //         }
    //     }
    //     .main{
    //         padding-top: 16px;
    //         .user-list-explain{
    //             padding-top: 0;
    //         }
    //     }
    // }

</style>
